<script setup lang="ts">
import {computed, nextTick, ref, watch} from 'vue'

const props = defineProps({
  /* 编辑器的内容 */
  content: {
    type: String,
    default: "",
  },
  /* 只读 */
  readonly: {
    type: Boolean,
    default: false,
  },
  // 上传文件大小限制(MB)
  fileSize: {
    type: Number,
    default: 5,
  },
  /* 高度 */
  height: {
    type: Number,
    default: 350,
  },
  /* 宽度 */
  width: {
    type: String,
    default: "",
  },
})

const emit = defineEmits([
  'update:content'
])

const styles = computed(() => {
  let style: any = {}
  // if (props.minHeight) {
  //   style.minHeight = `${props.minHeight}px`
  // }
  if (props.width) {
    style.width = `${props.width}`
  }
  return style
})

const curContent = ref<string>('')

watch(() => props.content, (val) => {
  if (val !== curContent.value) {
    curContent.value = val ? val : ""
  }
}, {immediate: true})

watch(() => curContent.value, (val) => {
  emit("update:content", val)
}, {immediate: true})

const editorConfig = {
  // 后端服务地址，后端处理参考
  // https://open-doc.modstart.com/ueditor-plus/backend.html
  serverUrl: '/ueditor.json',
  UEDITOR_HOME_URL: '/static/UEditorPlus/',
  UEDITOR_CORS_URL: '/static/UEditorPlus/',
  initialFrameHeight: props.height,
  autoHeightEnabled: false,
  readonly: props.readonly,
  imageConfig: {
    // 禁止本地上传
    disableUpload: false,
    // 禁止在线管理
    disableOnline: true,
  },
  videoConfig: {
    // 禁止本地上传,
    disableUpload: true,
  },
  toolbarCallback: function(cmd, editor) {
    switch(cmd){
      case 'simpleupload':
        // editor.execCommand('insertHtml', '<p><img src="xxxxx" /></p>');
        console.log('toolbarCallback',cmd, editor)
        return true;
      case 'insertimage':
        // editor.execCommand('insertHtml', '<p><img src="xxxxx" /></p>');
        console.log('toolbarCallback',cmd, editor)
        return true;
      case 'insertvideo':
        // editor.execCommand('insertHtml', '<p><img src="xxxxx" /></p>');
        console.log('toolbarCallback',cmd, editor)
        return true;
    }
  },
}
</script>

<template>
  <div class="editor-u">
    <vue-ueditor-wrap
      v-model="curContent"
      editor-id="editor"
      :config="editorConfig"
      :editorDependencies="['ueditor.config.js','ueditor.all.js']"
      :style="styles"
    />
  </div>
</template>

<style scoped lang="less">
.editor-u {
}
</style>
